<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam aperiam aspernatur
            consequatur corporis cum cumque dolore eum fuga, hic laboriosam magni minima nostrum placeat sapiente
            tempore temporibus velit.
        </div>
        <div>Aspernatur at consectetur dolores id illo minima nihil nostrum nulla numquam quod ratione sed,
            voluptatibus! Ab aperiam asperiores doloremque dolorum earum eveniet excepturi harum id, incidunt molestias
            rem temporibus voluptate!
        </div>
        <div>Aspernatur commodi, deleniti distinctio dolorem eveniet exercitationem fugit laboriosam minus mollitia
            odio, quis recusandae rerum similique! Amet earum eos iusto nihil obcaecati quibusdam? Harum illo labore
            libero minima pariatur porro!
        </div>
        <div>Dicta ducimus illum iste iure molestias. Debitis, expedita libero natus qui quod quos rerum sint ullam ut
            velit. Consectetur dolorum exercitationem explicabo molestias natus quia sit. A aliquam expedita illum?
        </div>
        <div>Architecto hic nulla officiis perspiciatis ullam. Aspernatur delectus expedita ipsum minima numquam
            praesentium velit! Aliquam culpa ipsam nam praesentium temporibus totam voluptate. Dicta fugit, iusto
            laboriosam nihil placeat repudiandae ut?
        </div>
        <div>Inventore optio quidem veritatis voluptas! Animi consectetur cupiditate delectus dicta dolor dolorum et
            eveniet excepturi expedita explicabo facilis fugiat illum in laboriosam, neque optio porro qui, quo
            reprehenderit sapiente sit.
        </div>
        <div>Aperiam, architecto blanditiis, consequatur excepturi, illum incidunt magni molestias nobis nulla
            perferendis quae quo reprehenderit! Deleniti est, et id incidunt magnam nihil quas quod voluptatibus. Aut
            est fuga officiis repellat.
        </div>
        <div>A consequuntur nesciunt similique vero! Animi cum dolor dolorem, eaque fugit ipsam, laudantium maxime modi
            nulla, omnis perferendis perspiciatis possimus quidem quod sequi tempora voluptatem. Adipisci eius nihil
            voluptatem voluptatibus!
        </div>
        <div>Architecto consectetur eius enim eum ex qui repellat tempora! Cum eveniet modi necessitatibus nulla?
            Accusamus amet autem corporis ducimus, error in ipsa magnam, magni minus mollitia natus possimus quo vel!
        </div>
        <div>Aliquid animi dolor dolore doloremque enim inventore labore molestias mollitia neque nobis numquam
            reiciendis, repellat saepe temporibus unde. Aspernatur at delectus eius, magnam odit porro repellat sequi
            similique unde ut!
        </div>
        <div>Harum in inventore iure labore, molestias mollitia voluptate voluptates. Asperiores deserunt eius, eligendi
            exercitationem ipsum iste neque nesciunt numquam odit officia placeat qui reiciendis sint sit tempore velit
            vero voluptate!
        </div>
        <div>Adipisci dolor id impedit iusto maxime reprehenderit veritatis. Cum error id nam sapiente soluta.
            Aspernatur earum laudantium magni natus non porro, sed tempore? Aliquam, at illum labore nulla perspiciatis
            quo.
        </div>
        <div>Deleniti dignissimos doloribus fugit officia qui quod soluta? Ab ad aperiam blanditiis consequuntur
            dolorem, eos exercitationem facere, laborum necessitatibus nihil nobis quam quisquam repellendus sequi
            tempora totam vel vitae voluptatem.
        </div>
        <div>Distinctio ex libero nobis quam. Alias architecto cum delectus dolore doloribus ea et eum, explicabo hic id
            labore laboriosam nisi nobis omnis possimus, provident qui quia quos recusandae, repudiandae ullam?
        </div>
        <div>Animi dolores ipsam officiis pariatur ratione temporibus voluptatibus. Accusamus debitis esse maiores
            pariatur quasi sint, vitae voluptate? Autem est exercitationem, expedita explicabo hic nostrum nulla
            officiis quia quis quo sint.
        </div>
        <div>Aut dolores doloribus eaque incidunt minima molestias numquam soluta, ullam! Amet architecto asperiores
            beatae blanditiis consequatur expedita illo incidunt iure libero nobis numquam officiis quae recusandae sed,
            sint ullam voluptatem!
        </div>
        <div>A aliquid aperiam beatae consectetur consequuntur deleniti dicta eaque earum error fugiat laboriosam libero
            magnam minima minus, modi molestias mollitia nemo nisi odio quidem quisquam ratione sint tenetur vel
            voluptatibus.
        </div>
        <div>Assumenda at dolore enim, illum neque optio repellat sapiente voluptatibus! Aliquid dolorum eaque fugiat
            labore natus nemo nihil nobis quos tempore ullam! Cum distinctio est fugit harum nesciunt nostrum ut?
        </div>
        <div>Aperiam assumenda atque blanditiis expedita facere in nam nemo, quam quibusdam sed. Ab adipisci asperiores
            cumque, et ex facere fugit hic impedit ipsum iusto maiores natus officia quae qui temporibus.
        </div>
        <div>Aspernatur autem blanditiis consequatur cumque deleniti enim id inventore ipsum laboriosam molestiae
            necessitatibus nesciunt nostrum quos, repellendus, voluptatem! Corporis cum doloremque ducimus, iste iure
            laborum maiores molestias obcaecati totam ut?
        </div>
        <div>Animi aut blanditiis consequuntur corporis deleniti deserunt, ducimus ex facere, fuga fugiat id inventore
            iste modi mollitia nemo neque nesciunt numquam odio possimus quas qui quibusdam sed unde ut veniam.
        </div>
        <div>Accusantium facilis hic, id, illo iste laborum neque odit quia quibusdam reiciendis saepe similique
            voluptatum. At distinctio error eum exercitationem, explicabo in ipsum maiores minima natus quod velit vitae
            voluptas.
        </div>
        <div>Accusamus alias architecto aut autem dolore iusto magnam, nam necessitatibus repellat! Accusamus
            accusantium aspernatur, corporis dolorem eaque, excepturi facilis fuga hic id ipsa modi natus necessitatibus
            nisi odio reiciendis, ut.
        </div>
        <div>Cupiditate doloribus et expedita harum laborum maiores nobis obcaecati odio possimus voluptas. Autem culpa
            doloremque error expedita, molestias obcaecati voluptates. A explicabo ipsam natus necessitatibus officiis
            provident quas quisquam sit!
        </div>
        <div>Aperiam debitis laborum libero minus numquam, sint voluptatum. Accusamus alias aperiam, architecto
            distinctio nemo quas quidem recusandae sapiente voluptate. Atque aut beatae, dolore ea fugit in incidunt
            reprehenderit unde voluptatem.
        </div>
        <div>Cum dolorem in iusto libero porro. Amet cumque dolorem eius id iste libero neque nobis numquam optio,
            perspiciatis porro quae similique? Aliquid culpa cum doloribus, error in quam soluta tempore.
        </div>
        <div>Aliquam aut autem beatae doloribus ex excepturi facilis perspiciatis, quis similique, sint soluta vero.
            Accusamus beatae cumque doloribus eos error exercitationem facilis inventore laboriosam, laborum omnis
            provident quidem veritatis voluptatum?
        </div>
        <div>Ad architecto ipsa odio pariatur. Alias cupiditate deserunt, dolores ea est excepturi ipsa maiores nulla
            obcaecati odit quasi quibusdam, quisquam sed similique temporibus tenetur voluptates? Atque distinctio
            facilis odio voluptatum?
        </div>
        <div>A, accusantium aperiam consequuntur facilis placeat repellendus rerum sequi? Alias architecto autem
            corporis harum hic quisquam rem. Alias aperiam at cum, dolore, dolores facilis illo nam perferendis
            praesentium, reiciendis suscipit?
        </div>
        <div>Illo nostrum quisquam rem. A culpa ex illo sint tempore! Accusamus iusto molestiae officia qui.
            Consequatur, dignissimos dolore earum, eveniet explicabo, fuga iste labore laboriosam libero magni optio
            reprehenderit sapiente!
        </div>
        <div>Cumque esse fuga iure maxime nesciunt non nostrum numquam placeat quae repellat, similique sit. Adipisci
            aliquid assumenda blanditiis deserunt dolore eaque eius illo inventore, magni, porro quasi quia quidem
            voluptatem.
        </div>
        <div>Atque consequatur dicta dolores ducimus error explicabo facilis mollitia nihil recusandae, soluta ullam
            unde ut. Debitis et ipsam iste maxime nam nobis numquam porro, provident quod, reiciendis saepe, tempore
            vero!
        </div>
        <div>Atque commodi dolores nam natus sed suscipit unde. Accusantium dolor est et, incidunt qui rem saepe
            sapiente sit suscipit tempore tenetur vel voluptatem. Alias cumque facilis nisi quia repellat sit!
        </div>
        <div>Amet est laboriosam magnam neque nesciunt quidem, quos repellat sequi suscipit vero! Culpa dicta distinctio
            dolores earum exercitationem laboriosam laudantium magnam, molestiae necessitatibus nulla perferendis quas
            rem sapiente tenetur voluptas?
        </div>
        <div>Dolore dolorem nesciunt rerum. Accusantium commodi, consequatur dolor dolore, earum ipsa modi nemo non,
            perspiciatis possimus quibusdam sit vero? Odit, porro, sequi. Architecto dolores laudantium pariatur. Fugit
            nemo sit ullam.
        </div>
        <div>Accusamus delectus eius eos error illo, itaque maiores molestias tempora. Accusamus dolores eaque eos error
            explicabo, itaque iure labore minus modi mollitia nesciunt optio quaerat quisquam repudiandae sit. Nemo,
            voluptates.
        </div>
        <div>Animi, cum fugiat ipsam minima quas quisquam saepe. Ad beatae dignissimos, dolor, expedita illum minima
            molestiae mollitia nam neque nisi, numquam officia optio perspiciatis possimus quam quibusdam quos totam
            unde.
        </div>
        <div>Alias aperiam, at atque cupiditate delectus dolore dolorum eaque eos et facere harum incidunt inventore
            libero minima neque pariatur possimus quibusdam quidem quisquam quos saepe sit tempora, ut veniam, voluptas?
        </div>
        <div>Beatae cupiditate eaque iste nobis, odit quod reiciendis velit. Animi dignissimos, distinctio dolor
            doloremque ducimus eaque eius incidunt nisi officiis, quae quia quibusdam quidem quod ratione sapiente sed
            temporibus veniam.
        </div>
        <div>Accusantium amet aperiam architecto atque consectetur culpa cumque cupiditate deleniti dicta dignissimos,
            distinctio dolore doloremque error fuga, fugiat iusto labore laboriosam minima minus mollitia quod
            recusandae soluta veritatis vero vitae.
        </div>
        <div>Amet, animi, at aut consectetur deserunt dicta dolore dolorem ducimus, eligendi exercitationem illo impedit
            incidunt molestiae non nostrum odio officia officiis pariatur perferendis quas quod reiciendis sunt suscipit
            vero voluptatem?
        </div>
        <div>Asperiores autem exercitationem facere, ipsa molestiae omnis provident quibusdam vero. Dignissimos
            excepturi nobis ullam veniam veritatis. Cupiditate, deserunt ducimus, eaque excepturi explicabo incidunt nam
            necessitatibus nesciunt qui saepe totam ullam.
        </div>
        <div>Ab alias aut cupiditate ea esse eum fuga iste itaque iusto labore laudantium natus nulla perferendis
            placeat possimus, quasi quo quos reprehenderit repudiandae, rerum sed sunt suscipit, ullam voluptatibus
            voluptatum?
        </div>
        <div>Adipisci beatae ducimus fuga illo itaque non perspiciatis quia repudiandae! Aperiam blanditiis cupiditate
            facere fugit harum id nam, natus neque nobis non optio quaerat quidem suscipit ut voluptas. Harum, illum?
        </div>
        <div>At atque aut consequatur cupiditate debitis delectus deleniti dignissimos distinctio, ducimus earum
            eligendi fugiat iste itaque nam nobis officia perspiciatis ratione repellat repellendus repudiandae sit
            tempora temporibus vero voluptas voluptate!
        </div>
        <div>Accusantium architecto aspernatur aut blanditiis consequatur culpa cupiditate deserunt dolorem, earum ipsum
            odit possimus, tempora vel. A assumenda ea eos esse expedita, laboriosam, maiores quae, quod reprehenderit
            voluptas voluptate voluptatum.
        </div>
        <div>Ab aspernatur atque aut ea error eum expedita fugit, impedit in ipsa ipsum laudantium nam nulla numquam
            pariatur quibusdam quis quos saepe tempore voluptates! Hic iusto maiores necessitatibus qui voluptates?
        </div>
        <div>Adipisci nostrum quam sequi similique sint? Commodi esse harum inventore iste laudantium maiores minus,
            porro repellat repellendus rerum. Aliquid at consequuntur doloremque eos esse hic ipsam quae quia unde
            veritatis.
        </div>
        <div>Dignissimos ea earum, esse eveniet fuga laudantium nostrum numquam odit officia perferendis praesentium
            quod reiciendis sapiente. Aliquam commodi cumque debitis, deserunt, dolore ea magni odio odit quia quo
            tenetur veritatis.
        </div>
        <div>Ad at doloremque eum impedit maiores nemo! Amet delectus dicta eveniet facilis ipsam iure nostrum
            perspiciatis placeat quam quasi, quidem similique tempore vero. Delectus earum itaque nesciunt pariatur,
            voluptatem voluptatum.
        </div>
        <div>Esse, iste itaque libero magnam numquam quos vel! A ab adipisci aperiam consequuntur cupiditate distinctio
            doloremque dolores illum ipsam molestias necessitatibus non, nostrum pariatur praesentium suscipit ullam,
            voluptatem voluptates voluptatum.
        </div>
        <div>Accusamus culpa, debitis? Accusamus aspernatur culpa deserunt dolorem ea eveniet ipsa iste iusto laudantium
            mollitia nisi nobis omnis, possimus quidem, ratione repellendus unde voluptas? Eius fuga mollitia neque
            omnis voluptatem?
        </div>
        <div>Ad animi beatae consequatur dicta dignissimos ducimus est eveniet exercitationem explicabo id, in ipsam
            ipsum iusto molestiae nam nobis non nulla, officiis pariatur perspiciatis quae quisquam recusandae
            reiciendis voluptas voluptate?
        </div>
        <div>Accusamus animi aut consequatur distinctio, dolores esse expedita incidunt ratione sed ullam. A beatae, et
            labore magnam nemo praesentium! Cupiditate distinctio eveniet facilis harum incidunt nisi sit voluptatum!
            Quasi, sunt!
        </div>
        <div>Cupiditate, laboriosam veritatis. Corporis distinctio ipsam quidem? Ad aspernatur autem consectetur eveniet
            fuga fugit maiores nostrum nulla, obcaecati praesentium quia quisquam repellendus similique sit vel
            voluptates, voluptatum? Dolore, quam, sequi?
        </div>
        <div>Aut blanditiis debitis deserunt ducimus fugiat inventore ipsum nihil saepe, similique sit? Accusantium
            asperiores cum eius eos ex facilis ipsam odit! Autem cumque cupiditate dolorum modi molestiae, ratione
            temporibus? Amet.
        </div>
        <div>Beatae consequatur nesciunt reiciendis reprehenderit repudiandae. Accusamus aut doloremque excepturi hic id
            illum libero non placeat reprehenderit temporibus. A aperiam cupiditate, fuga harum laudantium magnam magni
            nisi pariatur quae repellat.
        </div>
        <div>Aliquam animi delectus dicta et illum libero modi necessitatibus omnis quas quasi tempora, ut veritatis,
            voluptas. Blanditiis doloribus eos ipsum magnam porro quam similique. Architecto cumque eligendi illo nemo
            nesciunt.
        </div>
        <div>Accusantium facere itaque numquam. Ratione, reiciendis, sequi. Animi aut corporis et excepturi fuga impedit
            labore maxime nulla obcaecati optio pariatur quisquam ratione sunt ut vel, voluptatem voluptatibus! Adipisci
            aspernatur, inventore!
        </div>
        <div>A alias aliquam, assumenda at culpa eligendi et expedita id minima molestiae nostrum pariatur possimus
            quasi repellendus suscipit totam veritatis. Dolor doloremque nisi odio optio praesentium quaerat quas sit
            unde?
        </div>
    </div>
</body>
</html>